// ColorPicker

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin color-picker {
  width: 100%;
}

@mixin color-picker-portal {
  margin: 0.0625rem 0;
  font-size: $--x-color-picker-font-size;
  color: $--x-text;
  border: $--x-color-picker-border;
  border-radius: $--x-border-radius;
  box-shadow: $--x-box-shadow-light;
  background-color: $--x-background;
  width: 15rem;
  overflow: hidden;
  &-panel {
    padding: 0.375rem;
    margin: -0.375rem;
  }
  &-plate {
    width: 100%;
    height: 8rem;
    display: flex;
    border-radius: $--x-border-radius;
    position: relative;
  }
  &-white,
  &-black {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  &-white {
    background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
  }
  &-black {
    background: linear-gradient(0deg, #000, transparent);
  }
  &-cursor {
    position: absolute;
    width: 0.75rem;
    height: 0.75rem;
    display: inline-block;
    border-radius: 50%;
    border: 0.0625rem solid $--x-background-100;
  }
  &-tool {
    padding: 0.4rem;
  }
  &-operations {
    display: flex;
    align-items: center;
    padding: 0.4rem 0;
  }
  &-selected {
    margin-left: 0.4rem;
    width: 2rem;
    height: 2rem;
    border-radius: 2rem;
    background-image: $--x-color-picker-transparent;
    > div {
      width: 2rem;
      height: 2rem;
      border-radius: 2rem;
    }
  }
  &-area {
    margin-left: 0.4rem;
    position: relative;
    flex: 1;
    .x-slider-select > .x-slider-select-inner {
      > .x-slider-select-rail {
        height: 0.75rem;
      }
      > .x-slider-select-track {
        > .x-slider-select-process {
          background-color: transparent;
        }
      }
      > .x-slider-select-drags > .x-slider-select-drag > .x-slider-select-button {
        border-color: $--x-border;
        box-shadow: $--x-box-shadow-light;
      }
    }
  }
  &-slider {
    position: relative;
    width: 100%;
    .x-slider-select > .x-slider-select-inner {
      > .x-slider-select-rail {
        background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
      }
    }
  }
  &-transparent {
    margin-top: 0.4rem;
    position: relative;
    width: 100%;
    .x-slider-select > .x-slider-select-inner {
      > .x-slider-select-rail {
        background: $--x-color-picker-transparent;
        &:after {
          content: '';
          height: 100%;
          display: block;
        }
      }
    }
  }
  &-type {
    height: 5rem;
    .x-tabs .x-tabs-list {
      display: flex;
      justify-content: center;
    }
  }
  &-type-content {
    padding: 0.8rem 0.4rem;
    display: flex;
    .x-input .x-input-row input {
      text-align: center;
    }
  }
}
